<template>
    <div class="ClaendarModule-box" @mouseenter="MouseenterClaendarModule" @mouseleave="MouseleaveClaendarModule">
        <div class="ClaendarModule-box-left">
            <div class="Solarcalendar">
                <span>
                    <span style="font-size: 24px;">{{ timeObj.date }}</span>
                    <span>/{{ timeObj.month }}</span>
                </span>
                <span>{{ timeObj.year }}</span>
            </div>
            <div class="Lunarcalendar">
                <span>{{ CalendarObj.ncWeek }}</span>
                <span>农历{{ CalendarObj.IMonthCn }}{{ CalendarObj.IDayCn }}</span>
            </div>
        </div>
        <div class="ClaendarModule-box-right">
            <span><svg-icon name="日历" width="25" height="25"></svg-icon></span>
            <span>{{ SolarFestival ? SolarFestival : CalendarObj.astro }}</span>
        </div>
        <transition name="fade">
            <CalendarElement v-show="isModuleShow" />
        </transition>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import CalendarElement from '../CalendarElement/CalendarElement.vue';
// @ts-ignore
import LunarCalendar from 'js-calendar-converter';
// @ts-ignore
import Lunar from 'lunar-calendar';
const isModuleShow = ref(false);
// 创建一个响应式对象，用于存储当前时间
let now = new Date();
const timeObj = reactive({
    // 获取当前年份
    year: +now.getFullYear(),
    // 获取当前月份，并将其转换为数字
    month: +now.getMonth() + 1,
    // 获取当前公历天日期
    date: now.getDate()
});

// 获取农历月份数据
const CalendarObj = LunarCalendar.solar2lunar(timeObj.year, timeObj.month, timeObj.date);
// 获取农历月份数据
const CalendarDate = Lunar.calendar(timeObj.year, timeObj.month, true);

// 声明一个变量用于存储农历节日
const SolarFestival = ref();

// 遍历月份数据，查找是否有农历节日
CalendarDate.monthData.forEach((item: object | any) => {
    if (item.solarFestival?.length < 8 && item.day === timeObj.date) {
        item.solarFestival.includes('日') ? SolarFestival.value = item.solarFestival : SolarFestival.value = item.solarFestival + '日';
    }
});

// 鼠标进入时，显示模块
const MouseenterClaendarModule = () => {
    isModuleShow.value = true;
};
// 鼠标离开时，隐藏模块
const MouseleaveClaendarModule = () => {
    isModuleShow.value = false;
};

</script>

<style scoped lang="scss">
.ClaendarModule-box {
    width: 260px;
    height: 80px;
    border: 1px solid #E6EBED;
    border-radius: 5px;
    position: relative;
    display: flex;
    background: #fff;
    z-index: 9991;

    .ClaendarModule-box-left {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .Solarcalendar {
            width: 90%;
            height: 60%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-weight: bold;

            >span {
                display: flex;
                align-items: center;
                justify-content: space-around;

            }
        }

        .Lunarcalendar {
            width: 90%;
            height: 40%;
            margin: auto;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: space-around;

        }
    }

    .ClaendarModule-box-right {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        >span {
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .3s
    }

    .fade-enter,
    .fade-leave-to

    /* .fade-leave-active in <2.1.8 */
        {
        opacity: 0
    }
}
</style>